<template>
  <div class="devm">
    <div class="navtoggle">
      <el-button
        :class="islog ? 'actived' : ''"
        @click="islog = true"
      >
        设备列表
      </el-button>
      <el-button
        :class="islog ? '' : 'actived'"
        @click="islog = false"
      >
        设备状态
      </el-button>
    </div>
    <div v-show="islog">
      <div class="headerd">
        <label for="name">
          设备名称<el-tooltip
            class="item"
            effect="dark"
            content="请输入需要查询的设备名称"
            placement="top"
          >
            <span>①</span> </el-tooltip>:
        </label>
        <el-input
          id="name"
          v-model="eqname"
          type="btn"
          height="30"
          placeholder="用户名"
        />

        <label for="equipment">
          设备类型:
          <el-select
            v-model="equipment"
            placeholder="请选择活动区域"
          >
            <el-option
              label="触摸屏"
              value="0"
            ></el-option>
            <el-option
              label="摄像头"
              value="1"
            ></el-option> </el-select></label>
        <el-button
          type="primary"
          @click="queryequ()"
        >
          查询
        </el-button>
        <!-- <el-button @click="cha">
          取消
        </el-button> -->
        <div class="xzlist">
          <button @click="showdiaform">
            <i class="el-icon-plus"></i>新增设备
          </button>
        </div>
      </div>
      <add-facility
        ref="dialogform"
        @addlist="listadd"
      >
      </add-facility>

      <el-table
        ref="deviceTable"
        :data="tableDevice"
        border
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column
          prop="cameraId"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="cameraName"
          label="设备名称"
        >
        </el-table-column>
        <el-table-column
          prop="cameraType"
          label="设备类型"
        >
          <template slot-scope="scope">
            {{ scope.row.cameraType == 0 ? "摄像头" : "触摸屏" }}
          </template>
        </el-table-column>

        <el-table-column
          prop="cameraIp"
          label="IP地址"
        >
        </el-table-column>

        <el-table-column
          prop="cameraSerialNumber"
          label="序列号"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="equipmentId"
          label="安装位置"
        >
          <template slot-scope="scope">
            {{
              scope.row.equipmentId == 0
                ? "请选择正确的安装位置"
                : scope.row.equipmentId
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="cameraUser"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="cameraPassword"
          label="密码"
        >
        </el-table-column>
        <el-table-column
          prop="cameraStatus"
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.cameraStatus == 0 ? "启用" : "锁定" }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="deleteClick(scope.row.cameraId)"
            >
              删除
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="compileClick(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        v-show="total > 10"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <device-status v-show="!islog" />
  </div>
</template>

<script>
import { queryequipment, deleteCamera } from "@/api";
import addFacility from "../../components/addFacility.vue";
import deviceStatus from "@/components/deviceStatus";
export default {
  components: { addFacility, deviceStatus },
  data() {
    return {
      islog: true,
      tableHeight: 500,
      eqname: "",
      equipment: "",
      fileList: [],
      currentPage: 1, // 当前页
      limit: 10,
      total: 1,
      aca: [], //教室列表
      acb: [], //有机器的教室
      acc: [],
      // 表格数据
      tableDevice: [],
      queryequ(
        cameraName = this.eqname,
        page = this.currentPage,
        limit = this.limit
      ) {
        queryequipment({
          cameraName,
          page,
          limit,
        })
          .then((res) => {
             if (res == 503) {
            this.$router.push('/403')
          }
            this.tableDevice = res.data;
            this.total = res.count;
          })
          .catch((err) => {
            console.log(err);
          });
      },
    };
  },

  mounted() {
    this.queryequ();
    setTimeout(() => {
      this.tableHeight =
        window.innerHeight - this.$refs.deviceTable.$el.offsetTop - 60;
    }, 100);
  },
  methods: {
    showdiaform() {
      this.$refs.dialogform.formdata = {};
      this.$refs.dialogform.bg = 1;
      this.$refs.dialogform.dialogFormVisible = true;
    },
    // 页码改变时
    handleSizeChange(val) {
      this.limit = val;
      this.queryequ();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryequ();
    },
    cha() {
      let roomdata = this.$refs.dialogform.roomlist;
console.log(roomdata);


      // console.log(aa);
      // console.log(cc);
      console.log(this.aca);
      console.log(this.acb);
      console.log(this.acc);
      console.log(Object.keys(this.acc).indexOf("1"));
    },
    // 表格删除
    deleteClick(row) {
      this.$confirm("此操作将永久删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteCamera({
            cameraId: row,
          })
            .then((res) => {
              if (res.result_code == 200) {
                this.queryequ();
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 表格编辑
    compileClick(data) {
      this.$refs.dialogform.formdata = data;
      this.$refs.dialogform.bg = 0;
      this.$refs.dialogform.dialogFormVisible = true;
    },
    // 确认添加
    listadd(res) {
      if (res == 0) {
        this.queryequ();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
label{color: white;}
.devm {
  text-align: left;
}
.actived {
  background: #02a7f0;
  color: white;
}
::v-deep .el-input__inner {
  height: 30px;
  line-height: 30;
}
::v-deep .el-input__icon {
  line-height: 30px;
}
.el-input {
  width: 150px;
  margin: 0 15px 15px 5px;
}
.navtoggle {
  margin-bottom: 15px;
  border-bottom: 1px solid #999;
  box-shadow: 0 5px -5px 5px #999;
}
.el-button {
  margin-bottom: 10px;
  border: none;
}
.headerd {
  padding: 0 10px 10px;
  color: rgb(85, 85, 85);
  text-align: left;
  border-bottom: 2px solid #006560;
  label {
    display: inline-block;
    text-align: left;
    padding-right: 5px;
  }
  input {
    padding: 0 10px;
    color: #666;
    line-height: 38px;
    border-radius: 5px;

    width: 80px;
  }
  .el-button {
    box-sizing: border-box;
    margin-left: 20px;
    height: 28px;
    line-height: 0;
  }
  .el-select {
    width: 180px;
  }
  .el-date-editor {
    margin-right: 15px;
    width: 200px;
  }
}
.xzlist {
  margin-bottom: 10px;
  text-align: left;
  button {
    background: #006560;
    border: #006560;
    color: white;
    border-radius: 5px;
    padding: 0 10px;
    margin-right: 15px;
    height: 35px;
    line-height: 35px;
  }
  .dect {
    background-color: #1db3b3;
  }
}
</style>
